<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Title-->
    <title>Coffe Shop Website</title>
    <!--Style-->
    <link rel="stylesheet" href="./style.css">
    <!--fav-icon-->
    <link rel="shortcut icon" href="#">
    <!--Import Fonts-->
    
</head>
<body>
    
<!--Main part--> 

<section id="Main">
    
    <!--Header-->
    <Header>
        <!--Navigation-->
        <nav class="navigation">
            <!--menu-btn-->
            <input type="checkbox" id="menu-btn" class="menu-btn">
            <label for="menu-btn" class="menu-icon"> 
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
                    <path d="M 0 9 L 0 11 L 50 11 L 50 9 Z M 0 24 L 0 26 L 50 26 L 50 24 Z M 0 39 L 0 41 L 50 41 L 50 39 Z"></path>
                    </svg>
            </label>
            <!--menu-->
            <div class="side-menu">
                <div class="menu-container">
                    <strong>Main Links</strong>
                    <!--close-btn-->
                    <label for="menu-btn" class="close-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M8 8L40 40"/><path d="M8 40L40 8"/></g></svg>
                    </label>

                    <!--menu-list-->
                    <ul class="menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Shop</a></li>
                        <li><a href="#">Popular</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Recent</a></li>
                    </ul>




                </div>
            </div>




            <!--Logo-->
            <a href="#" class="logo">
                <img src="./images/logo.png" alt="Logo">
            </a>
            <!--nav-btns-->

            <div class="nav-btns">
                <!--Search-->
                <a href="javascript:void(0)" class="nav-search">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 24 24">
                        <path d="M 9 2 C 5.1458514 2 2 5.1458514 2 9 C 2 12.854149 5.1458514 16 9 16 C 10.747998 16 12.345009 15.348024 13.574219 14.28125 L 14 14.707031 L 14 16 L 19.585938 21.585938 C 20.137937 22.137937 21.033938 22.137938 21.585938 21.585938 C 22.137938 21.033938 22.137938 20.137938 21.585938 19.585938 L 16 14 L 14.707031 14 L 14.28125 13.574219 C 15.348024 12.345009 16 10.747998 16 9 C 16 5.1458514 12.854149 2 9 2 z M 9 4 C 11.773268 4 14 6.2267316 14 9 C 14 11.773268 11.773268 14 9 14 C 6.2267316 14 4 11.773268 4 9 C 4 6.2267316 6.2267316 4 9 4 z"></path>
                    </svg>
                </a>
                <!--User-->
                <a href="javascript:void(0)" class="nav-user">
                    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7ZM6.5 7.5a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0ZM3 19a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v3H3v-3Zm5-3a3 3 0 0 0-3 3v1h14v-1a3 3 0 0 0-3-3H8Z"/></svg>
                </a>

                <!--Cart-->
                <a href="#" class="nav-cart">
                    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 16 16"><path fill="currentColor" d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607l1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4a2 2 0 0 0 0-4h7a2 2 0 1 0 0 4a2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zM6 14a1 1 0 1 1-2 0a1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0zM9 5.5V7h1.5a.5.5 0 0 1 0 1H9v1.5a.5.5 0 0 1-1 0V8H6.5a.5.5 0 0 1 0-1H8V5.5a.5.5 0 0 1 1 0z"/></svg>
                    <span>0</span>
                </a>





            </div>




        </nav>

    </Header>



    <!--Main Content-->
    <div class="main-content">
        <!--text-->
        <div class="main-content-text">
            <strong>Coffe</strong>
            <h1>Enjoy <br/> Your Morning <br/> Coffe </h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quiden eaque sapiente magnam illum</p>
                <span>$20.50</span>
                <a href="#">Add To Cart</a>
            <!--img-->
            
        </div>
        <div class="main-content-img">
            <img src="./images/model.png" alt="model">
        </div>


    </div>







</section>


<!--Search Bar-->
<div class="search-bar">
    <!--input-->
    <form class="search-input">
    <input type="text" name="search" placeholder="Search for Product"/>
    </form>

    <!--cancel-btn-->
    <a href="javascript:void(0);" class="search-cancel">
        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M8 8L40 40"/><path d="M8 40L40 8"/></g></svg>
             
    </a>



</div>

<!--Login-sign-up-->

<div class="form">
    <!--Login-->
    <div class="login-form">
        <!-- cancel-btn -->
         <a href="javascript:void(0);" class="form-cancel">
            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M8 8L40 40"/><path d="M8 40L40 8"/></g></svg>
            
         </a>
         <!--heading-->
         <strong>Log in</strong>
         <!-- inputs -->
          <form>

            <input type="email" name="email" placeholder="Example@Example.com" required/>
            <input type="password" name="password" placeholder="Password" required/>
            <input type="submit" value="Log in"/>
          </form>
          <!-- btns -->
           <div class="form-btns">
            <a href="#" class="forget">Forget Your Password?</a>
            <a href="javascript:void(0);" class="sign-up-btn">Creat An Account</a>
           </div>
           

           


    </div>
    <!--Sign Up-->
    <div class="sign-up-form">
        <!-- cancel-btn -->
         <a href="javascript:void(0);" class="form-cancel">
            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M8 8L40 40"/><path d="M8 40L40 8"/></g></svg>
            
         </a>
         <!--heading-->
         <strong>Sign Up</strong>
         <!-- inputs -->
          <form>
            <input type="text" name="fullname" placeholder="Full Name" required/>
            <input type="email" name="email" placeholder="Example@Example.com" required/>
            <input type="password" name="password" placeholder="Password" required/>
            <input type="submit" value="Sign Up"/>
          </form>
          <!-- btns -->
           <div class="form-btns">
            
            <a href="javascript:void(0);" class="already-account">Already Have An Account?</a>
           </div>
           

           


    </div>

</div>

<!--Popular-->
<section id="popular">
    <!--heading-->
    <h2>Popular Coffe</h2>

    <!--container-->
    <div class="poular-container">
        <!--product-container-->
       
        <div class="popular-product-container">
                        <!--box1-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p1.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                        <!--box2-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p2.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                        <!--box3-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p3.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                        <!--box4-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p4.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                        <!--box5-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p5.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                        <!--box6-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p6.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>           
         
        </div>
        <!--banner-->
        <div class="popular-banner">
            <!--text-->
            <div class="popular-banner-text">
                <h3>Coffe Beans Collection</h3>
                <a href="#">Shop Now</a>
            </div>

            <!--img-->
            <div class="popular-banner-img">
                <img src="./images/banner.png" alt="banner">
            </div>
         </div>



         



    </div>





</section>


<!--Banner-->
<section id="shopping-banner">
    <div class="shopping-banner-container">
        <!--text-->
        <div class="shopping-banner-text">
            <strong>Collection</strong>
            <h3>Beautiful Coffe Beans</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <a href="#">Shop Now</a>
        </div>
        <!--img-->
        <div class="shopping-banner-img">
            <img src="./images/banner-img.png" alt="banner">
        </div>
    </div>
</section>


<!--Recent product-->
<div id = "recent-product">
    <h2>Recent Coffe Collection</h2>

    <!--container-->
    <div class="recent-product-container">
                                <!--box7-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p7.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                                    <!--box8-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p8.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                                    <!--box9-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p9.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>
                                    <!--box10-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/p10.png" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>










    </div>

</div>


<!--Partner Logo-->
<section id="partner">
    <img src="./images/logo-1.png" alt="logo">
    <img src="./images/logo-2.png" alt="logo">
    <img src="./images/logo-3.png" alt="logo">
    <img src="./images/logo-4.png" alt="logo">




</section>

<!--Recent product-->
<!--Coffe Collection-->
<div id = "recent-product">
    <h2>Coffe Collection</h2>

    <!--container-->
    <div class="recent-product-container">
                                <!--boxl1-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/pl1.webp" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                                    <!--boxl2-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/pl2.webp" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>

                                    <!--boxl3-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/pl3.webp" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>
                                    <!--boxl4-->
            <div class="product-box">
                <!--img-->
                <div class="product-box-img">
                    <img src="./images/pl4.webp" alt="product"/>
                    <span>New</span>
                </div>
                <!--text-->
                <div class="product-box-text">
                    <a href="#" class="prodcut-text-title">Coffe Beans</a>
                    <span>25.00$<del>45.00$<del></span>
                        <a href="#" class="product-cart-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M3.864 16.455c.546 2.183.819 3.274 1.632 3.91C6.31 21 7.435 21 9.685 21h4.63c2.25 0 3.375 0 4.19-.635c.813-.636 1.086-1.727 1.631-3.91c.858-3.432 1.287-5.147.387-6.301C19.622 9 17.852 9 14.316 9H9.684c-3.538 0-5.306 0-6.207 1.154c-.529.677-.6 1.548-.394 2.846"/><path d="m19.5 9.5l-.71-2.605c-.274-1.005-.411-1.507-.692-1.886A2.5 2.5 0 0 0 17 4.172C16.56 4 16.04 4 15 4M4.5 9.5l.71-2.605c.274-1.005.411-1.507.692-1.886A2.5 2.5 0 0 1 7 4.172C7.44 4 7.96 4 9 4"/><path d="M9 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z"/></g></svg>
                            Add To Cart
                        </a>
                </div>
            </div>










    </div>

</div>

<!--Download App-->
<section id="download-app">
    <!--img-->
    <div class="download-app-img">
        <img src="./images/mobile-app.jpg" alt="app"/>
    </div>
    <!--text-->
    <div class="download-app-text">
        <strong>Download App</strong>
        <p>Quasi ducimus, delectus perferendis sint quod iusto exercitationem odio eveniet ab quaerat magni rerum officiis rem, officia veniam. </p>
        <!--Buttons-->
        <div class="download-btns">
            <a href="#">
                <img src="./images/appstore-btn.png" alt="app store"/>
            </a>

            <a href="#">
                <img src="./images/googleplay-btn.png" alt="google play store"/>
            </a>
        </div>
   
    </div>
    
    

</section>

<!--Blog-->
<div id="blog">
    <div class="blog-heading">
        <h3>Recent News</h3>
    </div>

    <!--container-->
    <div class="blog-container">
        <!--box-->
        <div class="blog-box">
             <!--img-->
            <div class="blog-img">
                <img src="./images/blog-1.jpeg" alt="#">
            </div>
            <!--text-->
            <div class="blog-text">
                <span>10 July 2021 / Coffe</span>
                <a href="#" class="blog-title">We Provide Best Coffe Ever</a>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio blanditiis et reiciendis dolore odit magnam velit quam omnis quod. </p>
                <a href="#">Read More</a>
            </div>



        </div>

        <div class="blog-box">
            <!--img-->
           <div class="blog-img">
               <img src="./images/blog-2.jpg" alt="#">
           </div>
           <!--text-->
           <div class="blog-text">
               <span>10 July 2021 / Coffe</span>
               <a href="#" class="blog-title">We Provide Best Coffe Ever</a>
               <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio blanditiis et reiciendis dolore odit magnam velit quam omnis quod. </p>
               <a href="#">Read More</a>
           </div>



       </div>

       <div class="blog-box">
        <!--img-->
       <div class="blog-img">
           <img src="./images/blog-3.jpg" alt="#">
       </div>
       <!--text-->
       <div class="blog-text">
           <span>10 July 2021 / Coffe</span>
           <a href="#" class="blog-title">We Provide Best Coffe Ever</a>
           <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio blanditiis et reiciendis dolore odit magnam velit quam omnis quod. </p>
           <a href="#">Read More</a>
       </div>



   </div>
       
    </div>
 
</div>

<!--Service-->
<section class="services">
    <div class="service-box">
        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 32 32"><path fill="currentColor" d="M4 16h12v2H4zm-2-5h10v2H2z"/><path fill="currentColor" d="m29.919 16.606l-3-7A.999.999 0 0 0 26 9h-3V7a1 1 0 0 0-1-1H6v2h15v12.556A3.992 3.992 0 0 0 19.142 23h-6.284a4 4 0 1 0 0 2h6.284a3.98 3.98 0 0 0 7.716 0H29a1 1 0 0 0 1-1v-7a.997.997 0 0 0-.081-.394ZM9 26a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2Zm14-15h2.34l2.144 5H23Zm0 15a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2Zm5-3h-1.142A3.995 3.995 0 0 0 23 20v-2h5Z"/></svg>
    <span>Free Shiping</span>
    <p>Free Shipping For All Orders</p>
    
    </div>

    <div class="service-box">
        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M1.25 12C1.25 6.063 6.063 1.25 12 1.25S22.75 6.063 22.75 12v5.634c0 .913 0 1.526-.151 2.063a3.852 3.852 0 0 1-1.976 2.412c-.495.246-1.086.343-1.941.484l-.121.02l-.022.003c-.304.05-.565.094-.782.116a2.27 2.27 0 0 1-.698-.019a2.271 2.271 0 0 1-1.675-1.486a2.474 2.474 0 0 1-.121-.69c-.013-.225-.013-.5-.013-.823v-4.628c0-.477 0-.873.1-1.212a2.278 2.278 0 0 1 1.64-1.572c.344-.083.737-.05 1.185-.012l.102.008l.12.01c.84.07 1.421.117 1.914.308c.341.132.656.312.939.532V12a9.25 9.25 0 1 0-18.5 0v1.148c.283-.22.598-.4.939-.532c.493-.191 1.073-.239 1.913-.308l.12-.01l.103-.008c.448-.038.84-.07 1.186.012c.79.19 1.406.798 1.638 1.572c.102.338.102.735.101 1.212v4.628c0 .324 0 .598-.013.823a2.48 2.48 0 0 1-.12.69a2.271 2.271 0 0 1-1.676 1.486a2.27 2.27 0 0 1-.698.019a13.83 13.83 0 0 1-.782-.116l-.022-.003a45.79 45.79 0 0 0-.12-.02c-.856-.141-1.447-.238-1.942-.485a3.852 3.852 0 0 1-1.976-2.411c-.13-.462-.148-.98-.15-1.697v-.142l-.001-.225V12Zm1.5 5.514c0 1.078.007 1.465.095 1.775a2.353 2.353 0 0 0 1.2 1.476c.267.133.615.199 1.639.368c.331.055.547.09.712.107c.162.016.22.009.243.004a.772.772 0 0 0 .562-.513c.012-.034.029-.105.039-.279c.01-.177.01-.409.01-.759v-4.506c0-.634-.008-.784-.037-.881a.78.78 0 0 0-.552-.545c-.078-.019-.203-.018-.815.032c-1.008.083-1.352.12-1.616.222A2.335 2.335 0 0 0 2.837 15.6c-.08.299-.087.677-.087 1.728v.186ZM12 5.75a.75.75 0 0 1 .75.75v5a.75.75 0 1 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm-3 1.5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0V8A.75.75 0 0 1 9 7.25Zm6 0a.75.75 0 0 1 .75.75v2a.75.75 0 1 1-1.5 0V8a.75.75 0 0 1 .75-.75Zm3.154 6.543c-.612-.05-.737-.051-.815-.032a.78.78 0 0 0-.552.545c-.029.097-.037.247-.037.881v4.506c0 .35 0 .582.01.76c.01.173.027.244.04.278a.772.772 0 0 0 .561.513a.863.863 0 0 0 .243-.004c.166-.017.38-.052.713-.107c1.023-.17 1.371-.235 1.638-.367a2.353 2.353 0 0 0 1.2-1.477c.088-.31.095-.697.095-1.775v-.186c0-1.05-.006-1.43-.087-1.728a2.337 2.337 0 0 0-1.393-1.585c-.264-.103-.608-.139-1.616-.222Z" clip-rule="evenodd"/></svg>
    <span>Support 24/7</span>
    <p>Support 24h A Day</p>
    
    </div>

    <div class="service-box">
        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M17.7 7.7A7.1 7.1 0 0 0 5 10.8"/><path d="M18 4v4h-4m-7.7 8.3A7.1 7.1 0 0 0 19 13.2"/><path d="M6 20v-4h4"/></g></svg>
    <span>100% Money Back</span>
    <p>You Have 30 Days To Return</p>
    
    </div>
</section>


<!--Footer-->
<footer>
    <div class="footer-container">
        <!--company box-->
        <div class="footer-company-box">
            <!--logo-->
            <a href="#" class="footer-logo">
                <img src="./images/logo.png" alt="logo">
            </a>
                <!--details-->
                <p>Dolorem, nihil molestiae quod consequatur velit numquam maxime odit blanditiis ullam eaque nostrum enim neque aliquid inventore sequi fugiat consequuntur.</p>
                <!--social box-->
                <div class="footer-social">
                    <!--facebook-->
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 128 128"><rect width="118.35" height="118.35" x="4.83" y="4.83" fill="#3d5a98" rx="6.53" ry="6.53"/><path fill="#fff" d="M86.48 123.17V77.34h15.38l2.3-17.86H86.48v-11.4c0-5.17 1.44-8.7 8.85-8.7h9.46v-16A126.56 126.56 0 0 0 91 22.7c-13.62 0-23 8.3-23 23.61v13.17H52.62v17.86H68v45.83z"/></svg>
                    </a>
                    <!--instagram-->
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 256 256"><path fill="#0A0A08" d="M128 23.064c34.177 0 38.225.13 51.722.745c12.48.57 19.258 2.655 23.769 4.408c5.974 2.322 10.238 5.096 14.717 9.575c4.48 4.479 7.253 8.743 9.575 14.717c1.753 4.511 3.838 11.289 4.408 23.768c.615 13.498.745 17.546.745 51.723c0 34.178-.13 38.226-.745 51.723c-.57 12.48-2.655 19.257-4.408 23.768c-2.322 5.974-5.096 10.239-9.575 14.718c-4.479 4.479-8.743 7.253-14.717 9.574c-4.511 1.753-11.289 3.839-23.769 4.408c-13.495.616-17.543.746-51.722.746c-34.18 0-38.228-.13-51.723-.746c-12.48-.57-19.257-2.655-23.768-4.408c-5.974-2.321-10.239-5.095-14.718-9.574c-4.479-4.48-7.253-8.744-9.574-14.718c-1.753-4.51-3.839-11.288-4.408-23.768c-.616-13.497-.746-17.545-.746-51.723c0-34.177.13-38.225.746-51.722c.57-12.48 2.655-19.258 4.408-23.769c2.321-5.974 5.095-10.238 9.574-14.717c4.48-4.48 8.744-7.253 14.718-9.575c4.51-1.753 11.288-3.838 23.768-4.408c13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95c-8.418 3.271-15.556 7.648-22.672 14.764C14.367 28.6 9.991 35.738 6.72 44.155C3.555 52.297 1.392 61.602.77 75.226C.147 88.878 0 93.237 0 128c0 34.763.147 39.122.77 52.774c.622 13.625 2.785 22.93 5.95 31.071c3.27 8.417 7.647 15.556 14.763 22.672c7.116 7.116 14.254 11.492 22.672 14.763c8.142 3.165 17.446 5.328 31.07 5.95c13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95c8.418-3.27 15.556-7.647 22.672-14.763c7.116-7.116 11.493-14.254 14.764-22.672c3.164-8.142 5.328-17.446 5.95-31.07c.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07c-3.271-8.418-7.648-15.556-14.764-22.672C227.4 14.368 220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0Zm0 62.27c-36.302 0-65.73 29.43-65.73 65.73c0 36.302 29.428 65.73 65.73 65.73c36.301 0 65.73-29.428 65.73-65.73c0-36.301-29.429-65.73-65.73-65.73Zm0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667Zm83.686-110.994c0 8.484-6.876 15.36-15.36 15.36c-8.483 0-15.36-6.876-15.36-15.36c0-8.483 6.877-15.36 15.36-15.36c8.484 0 15.36 6.877 15.36 15.36Z"/></svg>
                    </a>
                    <!--X(Twitter)-->
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 16 16"><path fill="currentColor" d="M9.294 6.928L14.357 1h-1.2L8.762 6.147L5.25 1H1.2l5.31 7.784L1.2 15h1.2l4.642-5.436L10.751 15h4.05L9.294 6.928ZM7.651 8.852l-.538-.775L2.832 1.91h1.843l3.454 4.977l.538.775l4.491 6.47h-1.843l-3.664-5.28Z"/></svg>
                    </a>
                    <!--Youtube-->
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 256 180"><path fill="red" d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"/><path fill="#FFF" d="m102.421 128.06l66.328-38.418l-66.328-38.418z"/></svg>
                    </a>
                </div>
        
        
        
            
            
        </div>
            
        
        
        
    
             
                     <!--Main links-->
        <div class="footer-link-box">
            <strong>Main Link's</strong>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Popular</a></li>
                <li><a href="#">Recent News</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Collection</a></li>
            </ul>

        </div>

        <!--Social links-->
        <div class="footer-link-box">
            <strong>Social Link's</strong>
            <ul>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Instagram</a></li>
                <li><a href="#">X(Twitter)</a></li>
                <li><a href="#">Youtube</a></li>
                
            </ul>

        </div>

        <!--Subscribe-->
        <div class="footer-subscribe">
            <strong>Subscribe Now</strong>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam dolore molestias eligendi.</p>
            <form class="subscribe-box">
                <input type="email" name="subuscribe_email" placeholder="Example@Example.com" required/>
                <button>Subscribe</button>
            </from>
        
        </div>





    </div>
        
        

    <!--Bottom-->
    <div class="footer-bottom">
        <span>Made By Going-To Internet</span>
        <span>© Copyright 2024 - Going-To Internet</span>
    </div>




</footer>

















<!-- Script -->
<script src="./index.js"></script>

</body>
</html>